<!-- DemandList page -->
<template>
  <div class="p-20">
    <!-- 筛选 -->
    <a-row>
      <a-col :span="20">
        <a-row>
          <!-- 需求名称 -->
          <a-col :span="6">
            <a-row>
              <a-col :span="8" class="field-height text-right pr-5"
                >需求名称:</a-col
              >
              <a-col :span="16">
                <a-input placeholder="请输入需求名称" />
              </a-col>
            </a-row>
          </a-col>
          <!-- ... -->
        </a-row>
      </a-col>
      <a-col :span="4" class="text-right">
        <a-button type="primary" @click="searchDemand">查询</a-button>
      </a-col>
    </a-row>

    <!-- 操作 -->
    <div class="pt-20">
      <a-button type="primary" @click="openAddModal">新建需求</a-button>
      <demand-add
        ref="demandAddForm"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
        @create="handleOk"
      ></demand-add>
    </div>

    <!-- 列表 -->
    <div class="pt-20">
      <a-table :columns="columns" :dataSource="data">
        <span slot="demandName">需求名称</span>
        <span slot="demandLink"></span>
        <span slot="operation" class="text-center" slot-scope="text, record">
          <a-button
            :size="size"
            type="primary"
            class="mr-5"
            @click="toDemandInterfaceListPage(record.id)"
            >查看</a-button
          >
          <a-button
            :size="size"
            class="mr-5"
            style="background:red;color:#fff;border-color:red"
            >编辑</a-button
          >
          <a-button
            :size="size"
            style="background:red;color:#fff;border-color:red"
            >删除</a-button
          >
        </span>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" src="./demand-list.ts"></script>

<style lang="scss">
@import './demand-list.scss';
</style>
